<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <span class="leftM fonst-sz">黑马面面</span>
      </div>
      <!-- <div style="">简约而不简单</div> Fantasy  -->
      <div class="fonst-sz">简约而不简单</div>
      <el-dropdown @command="logout">
        <span class="el-dropdown-link fonst-sz"> 退出登录<i class="el-icon-arrow-down el-icon--right"></i> </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">首页</el-dropdown-item>
          <el-dropdown-item command="b">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->

      <el-aside width="170px">
        <!-- 侧边栏菜单区域 -->
        <!-- unique-opened：只保持一个菜单项的打开 -->
        <el-menu active-text-color="#0da8fa" unique-opened router>
          <!-- 第一行 -->
          <el-menu router>
            <el-menu-item class="active" index="/dashboard">
              <i class="el-icon-s-marketing yanse1"></i>
              <span slot="title">面板</span>
            </el-menu-item>
          </el-menu>
          <!-- 第二行 -->
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-user-solid"></i>后台管理 </template>
            <el-menu-item-group>
              <el-menu-item index="/users" class="el-icon-menu">用户</el-menu-item>
              <el-menu-item index="/menus" class="el-icon-menu">菜单</el-menu-item>
              <el-menu-item index="/permissions" class="el-icon-menu">权限</el-menu-item>
              <el-menu-item index="/logs" class="el-icon-menu">日志</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 第三行 -->
          <el-menu router>
            <el-menu-item index="/companys">
              <i class="el-icon-s-flag "></i>
              <span slot="title">企业管理</span>
            </el-menu-item>
          </el-menu>
          <!-- 第四行 -->
          <el-submenu index="2">
            <template slot="title"> <i class="el-icon-s-claim"></i>题库管理 </template>
            <el-menu-item-group>
              <el-menu-item index="/questions/list" class="el-icon-menu">基础题库</el-menu-item>
              <el-menu-item index="/questions/choice" class="el-icon-menu">精选题库</el-menu-item>
              <el-menu-item index="/questions/new" class="el-icon-menu">试题录入</el-menu-item>
              <el-menu-item index="/questions/randoms" class="el-icon-menu">组题列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 第五行 -->
          <el-submenu index="3">
            <template slot="title"> <i class="el-icon-menu"></i>学科管理 </template>
            <el-menu-item-group>
              <el-menu-item index="/list" class="el-icon-menu">学科</el-menu-item>
              <el-menu-item index="/directorys" class="el-icon-menu">目录</el-menu-item>
              <el-menu-item index="/tags" class="el-icon-menu">标签</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 第六行 -->
          <el-menu router>
            <el-menu-item class="active" index="/articles">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">面试技巧</span>
            </el-menu-item>
          </el-menu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <router-view :key="$route.fullPath"></router-view>
        <div class="mainfooter"></div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    logout(command) {
      if (command === 'a') {
        this.$router.push('/dashboard')
      } else if (command === 'b') {
        // 退出
        this.$router.push('/login')
        window.sessionStorage.clear()
        this.$router.push('/login')
        this.$message.info('退出成功')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.fonst-sz {
  font-size: 30px;
  font-family: 'STKaiti';
  cursor: pointer;
}
.el-dropdown-link {
  font-size: 20px;
}
.el-dropdown {
  width: 100px;
  height: 100%;
  text-align: center;
  line-height: 60px;
  color: #fff;
}
/deep/.el-header {
  padding-left: 100px;
}
.home-container {
  height: 100%;
}
.el-header {
  background: linear-gradient(90deg, #1493fa, #0182fa);
  box-shadow: 20px 0px 30px 10px #7caddf inset;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-aside {
  background-color: #ffffff;
  float: left;
  .el-menu {
    // 去除 el-menu 的边框线
    border-right: none;
    .el-icon-arrow-down {
      display: none;
    }
  }
}

.el-main {
  max-height: 800px;
  background-color: #eaedf1;
}

.iconfont {
  margin-right: 10px;
}

.mainfooter {
  margin-top: 200px;
}

.leftM {
  margin-left: 20px;
}
.el-menu-item.is-active {
  color: #000;
}
</style>
